<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>轮播图Test</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	 <link rel="stylesheet" href="themes/csslider.default.css" />
	 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ::-webkit-scrollbar {
            width: 2px;
            background: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-track {
            background: none;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(74, 168, 0, 0.6);
        }

        ul, ol {
            padding-left: 40px;
        }

        html, body {
            height: 100%;
            text-align: center;
            font: 400 100% 'Raleway', 'Lato';
            background-color: #282828;
            color: #CCC;
        }

        h1 {
            font-weight: 700;
            font-size: 310%;
        }

        h2 {
            font-weight: 400;
            font-size: 120%;
            color: #71AD37;
        }

        #slider1 {
            margin: 20px;
            font-family: 'Lato';
        }

            #slider1 > ul > li:nth-of-type(3) {
                background: url(./themes/fruit.jpg);
            }

            #slider1 > input:nth-of-type(3):checked ~ ul #bg {
                width: 80%;
                padding: 22px;
                -moz-transition: .5s .5s;
                -o-transition: .5s .5s;
                -webkit-transition: .5s .5s;
                transition: .5s .5s;
            }

                #slider1 > input:nth-of-type(3):checked ~ ul #bg div {
                    -moz-transform: translate(0);
                    -ms-transform: translate(0);
                    -o-transform: translate(0);
                    -webkit-transform: translate(0);
                    transform: translate(0);
                    -moz-transition: .5s .9s;
                    -o-transition: .5s .9s;
                    -webkit-transition: .5s .9s;
                    transition: .5s .9s;
                }

        #bg {
            color: #000;
            padding: 22px 0;
            position: absolute;
            left: 0;
            top: 16%;
            height: 20%;
            width: 0;
            z-index: 10;
            overflow: hidden;
        }

            #bg:before {
                content: '';
                position: absolute;
                left: -1px;
                top: 1px;
                height: 100%;
                width: 100%;
                z-index: -1;
                background: url(./themes/fruit.jpg) 1px 23%;
                -webkit-filter: blur(7px);
            }

            #bg:after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                z-index: 20;
                background: rgba(0, 0, 0, 0.35);
                pointer-events: none;
            }

            #bg div {
                -moz-transform: translate(120%);
                -ms-transform: translate(120%);
                -o-transform: translate(120%);
                -webkit-transform: translate(120%);
                transform: translate(120%);
            }

        .scrollable p {
            padding: 30px;
            text-align: justify;
            line-height: 140%;
            font-size: 120%;
        }
    </style>
</head>
<body style="background: url(./themes/fruit.jpg)">
	<div class="htmleaf-container">
		<div style="padding: 1em 0;">
		   
		    <div id="slider1" class="csslider">
		        <input type="radio" name="slides" id="slides_1" />
		        <input type="radio" name="slides" id="slides_2" checked />
		        <input type="radio" name="slides" id="slides_3" />
		        <ul>
		            <li>
		                 <img src="./themes/fruit.jpg" />
		            </li>
		            <li>
		                <img src="./themes/stones.jpg" />
		            </li>
		            <li>
		                <img src="./themes/fruit2.jpg" />
		            </li>
		        </ul>
		        <div class="arrows">
		            <label for="slides_1"></label>
		            <label for="slides_2"></label>
		            <label for="slides_3"></label>
		        </div>
		        <div class="navigation">
		            <div>
		                <label for="slides_1"></label>
		                <label for="slides_2"></label>
		                <label for="slides_3"></label>
		            </div>
		        </div>
		    </div>
		</div>
	</div>
	
</body>
</html>